*{
    /* 初始化 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    /* 防止选取 */
    user-select: none;
}
.container{
    width: 765px;
    height: 600px;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 阴影 */
    box-shadow: 
        0 10px 20px rgba(0,0,0,0.2),
        0 6px 6px rgba(0,0,0,0.25);
    /* 相对定位 */
    position: relative;
}
.bottom,
.middle,
.top{
    width: 100%;
    height: 100%;
    /* 绝对定位 */
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    /* 设置元素不对指针事件做出反应 */
    pointer-events: none;
}
.bottom img,
.middle img,
.top img{
    height: 100%;
}
/* 方便看效果 */
.top{
    width: 175px;
}
/* 滑块 */
.scroller{
    width: 50px;
    height: 50px;
    background-color: #fff;
    /* 绝对定位 垂直居中 */
    position: absolute;
    top: 50%;
    left: 150px;
    transform: translateY(-50%);
    border-radius: 50%;
    /* 阴影 */
    box-shadow: 3px 0 6px rgba(0,0,0,0.15);
    cursor: pointer;
    /* 默认不透明度为0.9 */
    opacity: 0.9;
    /* 不透明度变化时的过渡效果 */
    transition: opacity 0.2s;
}
/* 箭头图标 */
.scroller .fa{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* 弹性布局 内容居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
}
/* 分割线（上下两段） */
.scroller::before,
.scroller::after{
    content: "";
    width: 7px;
    height: 9999px;
    /* 绝对定位 水平居中 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* 顶层 */
    z-index: 9;
    box-shadow: 3px 0 6px rgba(0,0,0,0.15);
    /* 过渡 */
    transition: 0.2s;
}
.scroller::before{
    top: 49px;
}
.scroller::after{
    bottom: 49px;
}
.scroller:hover{
    opacity: 1;
}
/* 中间层滑块位置 */
.scroller-middle{
    margin-top: 25px;
}
/* 最顶层滑块位置 */
.scroller-top{
    margin-top: -25px;
}
/* 中间层滑块、分割条的颜色 */
.scroller-middle .fa{
    border: 5px solid lightsteelblue;
    color: lightsteelblue;
}
.scroller-middle::before,
.scroller-middle::after{
    background-color: lightsteelblue;
}
/* 最顶层滑块、分割条的颜色 */
.scroller-top .fa{
    border: 5px solid skyblue;
    color: skyblue;
}
.scroller-top::before,
.scroller-top::after{
    background-color: skyblue;
}
/* 滑块滑动时的样式 */
.scrolling{
    pointer-events: none;
    opacity: 1;
}